<template>
    <s-layout title="鲸囍云店" :onShareAppMessage="shareInfo">
        <scroll-view class="ss-modal-box ss-flex-col" scroll-y @scrolltolower="onScrollToLower">
            <view class="header">
                <view class="header-tabs">
                    <view :class="['item', { active: headerIndex == index }]" v-for="(item, index) in headerTabs"
                        :key="index" @click="headerTabClick(index)">{{ item }}</view>
                </view>
                <TaskProgress :progress="taskaInfo.rate" :value="taskaInfo" />
            </view>
            <view class="logo">
                <image class="logo-img" mode="aspectFill"
                    :src="sheep.$url.cdn('/storage/default/20250408/3a1ebfd2a1740667f4e2f6c4f7fce6d2.png')"></image>
                <image mode="widthFix" class="img-center"
                    :src="sheep.$url.cdn('/storage/storelevel/20250411/20191c079efabebb660ad58777d6956a.png')"
                    v-if="taskaInfo.finish_num !== 0"></image>
                <image mode="widthFix" v-else class="img-center" style="top:17%;width: 513rpx;left: 50%;"
                    :src="sheep.$url.cdn('/storage/storelevel/20250410/c5af42adddbb785629143f13af7c1407.png')"></image>
                <view class="rules" @click="toRules">规则</view>
                <view class="fillInformation" v-if="taskaInfo.is_open_shop !== 0" @click="fillInformations()">

                    {{ taskaInfo.is_open_shop == 1 ? '任务已完成，去填写资料' : taskaInfo.is_open_shop ==
                        2 ? '资料已提交，请等待审核' : taskaInfo.is_open_shop == 3 ? "审核成功" : taskaInfo.is_open_shop == 4
                            ? "审核失败，请重新提交" : "" }}

                </view>
                <view class="remark" v-if="taskaInfo.is_open_shop == 4">
                    {{ taskaInfo.remark }}
                </view>
               <view class="img-bottom" @click="openShop()" >
                    <image mode="widthFix" class="posiImg"
                        src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250411/1770e9a1e8e33988cce9ea59eee24beb.png">
                    </image>
                    <view class="txt">开店直通车</view>
                </view>
            </view>
            <view class="friends" v-if="taskaInfo.is_open_shop == 0">
                <view class="left">您的好友已完成{{ taskaInfo.help_num }}单</view>
                <view class="c" @click="tohistory">好友下单记录
                    <uni-icons type="right" size="14" color="#f3aa7d"></uni-icons>
                </view>
            </view>
            <view class="task" v-if="taskaInfo.is_open_shop == 0">
                <view class="title">
                    完成任务即可成为带货达人，成为鲸囍云店店主
                </view>
                <view class="lists">
                    <view :class="['list',{disableds:item.is_disabled == 1}]" v-for="
(item, index) in taskaInfo.list" :key="index">
                        <view class="left">
                            <image mode="widthFix"
                                :src="sheep.$url.cdn('/storage/default/20250408/c16ba619de8df191547cca7c690e25fa.png')">
                            </image>
                            <view class="ms">
                                <view class="shopName">{{ item.desc }}</view>
                                <view class="notion">凑单{{ item.buy_amount }}元以上</view>
                            </view>
                        </view>
                        <view class="right">
                            <view class="action" v-if="item.is_disabled == 2">
                                <view class="left" v-if="item.is_finish == 0" @click="toDetail(item)">
                                    <image mode="widthFix"
                                        :src="sheep.$url.cdn('/storage/default/20250408/01a440a18fa525cc7be3f96939efebfc.png')">
                                    </image>
                                </view>
                                <button open-type="share" v-if="item.is_finish == 0" class=" right ss-reset-button"
                                    @click="share(item)">
                                    <image class="task-item-share-2-image"
                                        src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250408/799513519e3a748762e633c6cf7d5f1a.png"
                                        mode="widthFix"></image>
                                </button>

                                <view class="isFinish" v-if="item.is_finish == 1">已完成</view>
                                
                            </view>
                            <view class="isFinished" v-if="item.is_disabled == 1">未开通店铺</view>
                        </view>
                    </view>
                </view>
                <view class="all" @click="toAll">
                    查看全部
                </view>
            </view>
            <!-- <view class="recommend" v-if="taskaInfo.is_open_shop == 0">
                <view class="title">
                    套餐推荐
                </view>
                <view class="menutabs">
                    <view class="tab" v-for="(item, index) in menutabs" :key="index"
                        :class="{ active: index == menutabIndex }" @click="menutabClick(index)">
                        {{ item }}
                    </view>
                </view>
                <goodsList :data="menusLists" :type="'task'" :price="price"></goodsList>
            </view> -->
            <view :class="['recommend', { goodss: taskaInfo.is_open_shop !== 0 }]">
                <view class="title">
                    店铺推荐
                </view>
                <view class="tabs">
                    <view class="tab" v-for="(item, index) in tabs" :key="index" :class="{ active: index == tabIndex }"
                        @click="tabClick(index)">
                        {{ item.title }}
                    </view>
                </view>
                <view class="goods">
                    <goodsList :data="goods" :type="'good'"></goodsList>
                </view>
            </view>
        </scroll-view>
        <su-popup :show="show" type="center" round="0" :isMaskClick="true" backgroundColor="transparent" @close="close">
            <view class="contents">
                <view class="cont">
                    <view class="title">温馨提示</view>
                    <view class="content">{{ waring }}</view>
                </view>
                <view class="btn" @click="fillInformations()">{{ taskaInfo.is_open_shop == 1 ? '去填写' : '完成任务' }}</view>
            </view>
        </su-popup>
    </s-layout>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
    isEmpty
} from 'lodash';
import TaskProgress from './components/progress.vue';
import goodsList from './components/goods.vue';
const state = reactive({
	couponData:{},
    list: [],
    num: 0,
    item: null,
	show_couponPop:false,
	type:''
})
const params = reactive({
    page: 1,
    total_page: 10,
    grade: 'gold'
})
const share = (item) => {
    state.item = item
    console.log(item, 'item');

}
const shareInfo = computed(() => {
    if (isEmpty(state.item)) return {};

    return {
        title: state.item.desc,
        path: `/pages/store/shop?id=${state.item.buy_shop_id}&taskUserId=${state.item.user_id}&price=${state.item.buy_amount}`,
        image: ''
    }
});
// 顶部切换
const headerTabs = ['我的任务', '我的店铺', '我的团队', '排行榜']
// 店铺类型
const tabs = [
    {
        title: '黄金店铺',
        value: 'gold'
    },
    {
        title: '钻石店铺',
        value: 'diamond'
    },
    {
        title: '星耀店铺',
        value: 'starshine'
    },
    {
        title: "荣耀店铺",
        value: "honor"
    }
]
// 填写资料模块
const fillInformations = () => {
	console.log('fillInformations:',taskaInfo.value.is_open_shop);
	// let is_applay = uni.getStorageSync('is_merchant_appy_self');
	
	// if(is_applay==1){
	// 	return;
	// }
	
    if (taskaInfo.value.is_open_shop == 1 || taskaInfo.value.is_open_shop == 4) {
        sheep.$router.go("/pages/commission/merchant/cApply", {
            type: 0,//0自己入驻 1代理帮忙入驻shopType
            shopType: 1
        })
    }
    else {
        close()
    }

}
// 跳转规则页面
const toRules = () => {
    uni.navigateTo({
        url: '/pages/store/rules'
    })
}
// 弹窗显示
const show = ref(false)
const close = () => {
    show.value = false
}
// // 使用 scroll-view 的触底事件
// const onScrollToLower = () => {
//     if (params.page < params.total_page) {
//         params.page++
//         getGoodsList()
//     }
// };
// 跳转好友记录模块
const tohistory = () => {
    uni.navigateTo({
        url: '/pages/store/orderRecords'
    })
}
// 套餐模块
const menutabs = ['1050套餐', '1680套餐']
const tabIndex = ref(0)
const menutabIndex = ref(0)
const price = ref(1050)
// 任务模块
const taskaInfo = ref({})
// 商品模块
const goods = ref({
    goodsList: []
})
// 套餐模块
const menusLists = ref({
    goodsList: []
})
// 全部任务模块
const toAll = () => {
    uni.navigateTo({
        url: '/pages/store/task'
    })
}
const headerIndex = ref(0)
const waring = ref('123165498754654')
// 顶部tabs切换
const headerTabClick = async (index) => {
    headerIndex.value = 0
    if (index == 1) {
        const res = await sheep.$api.store.getOwnStoreInfo()
        console.log(res, 'res');

        if (res.error == 1) {
            waring.value = res.msg
            show.value = true
            return
        }
        if (JSON.parse(uni.getStorageSync('user-store')).userInfo.id == null) {
            return
        }
        else {
            uni.setStorageSync('shopInfo', JSON.stringify(res.data))
            uni.navigateTo({
                url: '/pages/store/shop?id=' + res.data.id
            })
        }
    }
    else if (index == 2) {
        uni.navigateTo({
            url: '/pages/store/team'
        })
    }
    else if (index == 3) {
        uni.navigateTo({
            url: '/pages/store/rank'
        })
    }
}
// 切换店铺等级
const tabClick = (index) => {
    tabIndex.value = index
    params.grade = tabs[index].value
    params.page = 1
    goods.value.goodsList = []
    getGoodsList()
}
// // 套餐分类
// const menutabClick = (index) => {
//     menutabIndex.value = index
//     console.log(index, menutabIndex.value);

//     if (index == 0) {
//         price.value = 1050
//     } else {
//         price.value = 1680

//     }
//     getMenuList()
// }
// 获取任务列表
const getTaskList = async () => {
    const res = await sheep.$api.store.getStoreList()
	res.data.list  = res.data.list.slice(0,5)
    taskaInfo.value = res.data


}
// 获取是否已买套餐
const getIsBuys = async () => {
    const res = await sheep.$api.store.checkIsBuy()
    console.log(res);

}
// 获取套餐列表
const getMenuList = async () => {
    const res = await sheep.$api.store.getStoreInfoPay({ price: price.value })
    menusLists.value.goodsList = res.data

}
// 获取商品列表
const getGoodsList = async () => {
    const { error, data } = await sheep.$api.store.getStoreDetailWash(params)
    if (error == 0) {
        console.log(data);
        goods.value.goodsList = goods.value.goodsList.concat(data.data)
        params.total_page = 1
    }

}
// 跳转详情
const toDetail = (item) => {
    uni.navigateTo({
        url: '/pages/store/shop?id=' + item.buy_shop_id + '&taskUserId=' + item.user_id + '&price=' + item.buy_amount
    })
}
const openShop = () => {
    uni.navigateTo({
        url: '/pages/store/shop?id=' + menusLists.value.goodsList[0].store_id + '&price=1680'
    })
}
onShow(async () => {
    await getIsBuys()
    await getMenuList()
    await getGoodsList()
    await getTaskList()

});


onLoad((option)=>{
	if(option.type=="coupon"){
		sheep.$router.go('/pages/store/shop',{
			id:option.supplier_id,
			...option
		})
	}
})
</script>

<style lang="scss" scoped>
.ss-modal-box {
    height: calc(100vh - 172rpx);
    overflow: hidden;
    overflow-y: auto;

}

.fillInformation {
    padding: 10rpx 20rpx;
    background: #f7e7b4;
    color: #616161;
    font-size: 28rpx;
    position: absolute;
    top: 67%;
    left: 50%;
    transform: translate(-50%, 50%); // 使用 transform 来居中
    z-index: 12;
    border-radius: 999999rpx;
}

.remark {
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%, 50%); // 使用 transform 来居中
    z-index: 12;
    color: #ff3d3d;
    font-size: 28rpx;
}

.contents {
    padding: 20rpx;
    width: 600rpx;
    height: 431rpx;
    background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250408/839be2dd0fcc846e8a6b2b8f86e1d437.png');
    background-size: 100% 100%;
    position: relative;

    .cont {
        width: 100%;
        // text-align: center;
        margin-top: 135rpx;
        padding: 0 70rpx;

        .title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }

        .content {
            width: 480rpx;
            font-size: 28rpx;
            word-wrap: break-word;
        }
    }

    .btn {
        width: 70%;
        padding: 20rpx;
        border-radius: 999999rpx;
        background: #426dfa;
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        text-align: center;
        margin: 20rpx auto;
        position: absolute;
        bottom: 60rpx;
        left: 50%;
        transform: translate(-50%);
    }
}

.header {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx 80rpx;
    text-align: center;
    position: relative;

    height: 100rpx;
    z-index: 11;
    background: #fef3d7;
    margin-bottom: -150rpx;

    .header-tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-radius: 999999rpx;
        padding: 20rpx 0;
        color: #333;

        .item {
            width: 35%;
            text-align: center;
        }

        .active {
            color: #266BF6;
            font-weight: bold;
        }
    }

    .progress {
        width: 100%;
        position: absolute;
        top: 46%;
        left: 12%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: start;
        z-index: 11;

        .cont {
            width: 40%;
            height: 20rpx;
        }

        .txt {
            color: #fff;
            font-size: 24rpx;
        }
    }

    .top-bg1 {
        width: 100%;
    }

}

.task-item-share {
    width: 150rpx;
    height: 60rpx;
    border-radius: 100rpx;
    background-color: #fff;
    border: 1rpx solid #F5782A;

    .task-item-share-2 {
        flex: 1;
        height: 60rpx;

        .task-item-share-2-image {
            width: 55rpx;
        }
    }
}

.logo {
    width: 100%;
    position: relative;
    height: 800rpx;

    .logo-img {
        width: 100%;
        height: 778rpx;
        // position: absolute;
        // top: 50%;
        // left: 0;
    }

    .rules {
        padding: 5rpx 50rpx 5rpx 10rpx;
        background: #f7e7b4;
        color: #302417;
        font-weight: bold;
        position: absolute;
        top: 34%;
        right: -40rpx;
        border-radius: 9899999rpx;

    }

    .img-center {
        width: 423rpx;
        background: transparent;
        position: absolute;
        top: 12%;
        left: 50%;
        transform: translate(-50%, 50%); // 使用 transform 来居中
        z-index: 12;
    }

    .none {
        width: 514rpx;
        background: transparent;
        position: absolute;
        top: 17%;
        left: 48%;
        transform: translate(-50%, 50%); // 使用 transform 来居中
        z-index: 12;
    }

    .img-bottom {
        position: absolute;
        bottom: 22%;
        left: 30rpx;
        background: #f188ac;
        border: 2rpx solid #333;
        border-radius: 50%;
        width: 110rpx;
        height: 110rpx;
        text-align: center;
        box-sizing: border-box;
        z-index: 88;

        .posiImg {
            width: 90rpx;
        }

        .txt {
            width: 117%;
            background: #fff;
            color: #9E9E9E;
            font-size: 24rpx;
            text-align: center;
            padding: 5rpx;
            border-radius: 99999rpx;
            margin: -5rpx -10rpx;
        }
    }
}

.friends {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, #ffe6d0, #fff);
    padding: 10rpx;
    box-sizing: border-box;
    margin-top: -100rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    position: relative;
    z-index: 999;
    color: #f3aa7d;

    .left {
        color: #f0862a;
        font-weight: 600;
    }

    .right {
        color: #f3aa7d;
        display: flex;
        justify-content: start;
        align-items: center;
    }
}

.task {
    margin-top: -2rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    background: #fff;
    padding-bottom: 10rpx;
    box-sizing: border-box;
    .title {
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
        background: #fff;
        padding: 20rpx;
        position: sticky;
        top: 0;
        z-index: 99;
    }

    .lists {
        box-sizing: border-box;
        // height: 994rpx;
        overflow: hidden;
        padding: 20rpx;
        .list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx;
            background: #fbefe1;
            margin-bottom: 20rpx;
            border-radius: 15rpx;

            .left {
                display: flex;
                align-items: center;
                justify-content: start;

                image {
                    width: 80rpx;
                    margin-right: 20rpx;
                }

                .shopName {
                    font-weight: bold;
                    width: 345rpx;
                    color: #333;
                    font-size: 30rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .notion {
                    font-size: 24rpx;
                    color: #9E9E9E;
                    margin-top: 10rpx;
                }
            }

            .right {
                width: 30%;

                .isFinish {
                    text-align: center;
                    padding: 15rpx 10rpx;
                    height: 35rpx;
                    width: 100%;
                    color: #f5782a;
                }
                .isFinished {
                    text-align: center;
                    padding: 15rpx 10rpx;
                    height: 35rpx;
                    width: 100%;
                    color: #f5782a;
                }
                .action {
                    display: flex;
                    justify-content: start;
                    align-items: center;
                    border: 2rpx solid #f0862a;
                    border-radius: 99999rpx;

                    .left,
                    .right {
                        text-align: center;
                        padding: 15rpx 10rpx;
                        height: 35rpx;
                    }

                    .left {
                        background: #f0862a;
                        border-radius: 99999rpx;
                        width: 60%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        image {
                            margin: 0 20rpx;
                        }
                    }
                }

                image {
                    width: 60rpx;
                }
            }

            .ss-reset-button {
                width: 100%;
            }
        }
        .disableds{
            background: #ccc;
            .right{
                .isFinished {
                    text-align: center;
                    padding: 15rpx 10rpx;
                    height: 35rpx;
                    width: 100%;
                    color: #333;
                }
                .action{
                    border: 2rpx solid #ccc;
                }
            }
        }
    }

    .all {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: #a1a1a1;
    }
}

.recommend {

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        font-size: 35rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
    }

    .menutabs {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 20rpx;

        .tab {
            color: #9E9E9E;
            font-size: 28rpx;
            margin-right: 60rpx;

        }

        .active {
            color: #f9363e;
            font-weight: bold;
        }
    }

    .tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        position: sticky;
        top: 0;
        z-index: 99;
        background: #f7f7f7;

        .tab {
            color: #9E9E9E;
            font-size: 28rpx;

        }

        .active {
            color: #f0862a;
            font-weight: bold;
        }
    }

    .goods {
        padding: 20rpx 20rpx 0 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;

        .good {
            width: 46%;
            background: #fff;
            text-align: center;
            margin-bottom: 20rpx;
        }
    }
}

.goodss {
    margin-top: -6rpx;

    .title {
        margin-bottom: 20rpx;
    }
}
</style>